import store from '@/store'

function checkPermission(el, binding) {
    const { value } = binding
    const roles = store.getters && store.getters.roles

    if (value && value instanceof Array) {
        if (value.length > 0) {
            const permissionRoles = value

            const hasPermission = roles.some(role => {
                return permissionRoles.includes(role)
            })

            if (!hasPermission) {
                el.parentNode && el.parentNode.removeChild(el)
            }
        }
    } else {
        throw new Error(`need roles! Like v-permission="['admin','editor']"`)
    }
}

export default {
    inserted(el, binding) {
        checkPermission(el, binding)
    },
    /**
     * Updates the element's permission state based on the binding value
     * @param {HTMLElement} el - The DOM element to update permissions for
     * @param {Object} binding - Vue directive binding object containing permission values
     */
    update(el, binding) {
        checkPermission(el, binding)
    }
}